<template>
	<view class="auth">
		<image class="image" src="../../static/logo.png" mode=""></image>
		<!-- <view class="apply">
			申请获取以下权限
		</view> -->
		<view class="description">
			申请获取您的手机号,用于货品签收
		</view>
		<div style="display: flex;flex-direction: column;justify-content: space-between;">
			<view class="inputBorder" style="margin-bottom: 30rpx;border:none">
				<uni-easyinput style="border: none;flex:1;font-size:30rpx" type="number" placeholder="'请输入手机号"
					v-model="phone"></uni-easyinput>
				<view v-if="isCode==true"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<uni-easyinput style="border: none;flex:1;font-size:30rpx" type="number" placeholder="请输入验证码"
						v-model="code"></uni-easyinput>
					<button size="mini" style="height: 38px;line-height: 38px;margin-left:20rpx;margin-top:8rpx"
						type="primary" @click="codeChange">{{!codeTime?'获取验证码':codeTime+'s后重发'}}</button>
				</view>
			</view>
			<view style="" :class="{'margin90':isCode==true}">
				<!-- <button lang="zh_CN" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='tl-btn tl-btn-8dd'>微信用户快捷登陆</button> -->
				<button type="primary" style="" @click="getPhoneNumberOne" :disabled="disabled">提交</button>
				<view class="flexBox" style="font-size: 12px;margin-top:20rpx">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox value="a" :checked="agree" />
							我已阅读并同意
						</label>
						<text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text>
						<text @click="openUse" style="color: #b051ff;">《隐私政策》</text>
					</checkbox-group>
				</view>
			</view>
		</div>

		<privacyPopup></privacyPopup>
	</view>
</template>

<script>
	import {
		regPhone
	} from '@/utils/regExp.js'
	const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	import WXBizDataCrypt from '@/utils/WXBizDataCrypt.js'
	import privacyPopup from '@/components/privacy-popup/privacy-popup.vue'
	export default {
		components: {
			privacyPopup
		},
		data() {
			return {
				disabled: false,
				isCode: false,
				// 隐私协议是否选择
				agree: false,
				phoneCode: '',
				//授权的手机号
				phone: "",
				code: "",
				codeTime: 0,
				openId: '',
				unionid: '',
				session_key: '',
				// 是否显示发送验证码
				status: false,
				isUser: 0
			}
		},
		onLoad(options) {
			this.status = false
			this.getPhone()
			console.log(options);
			this.query = options.query
			this.isUser = options.isUser
		},
		methods: {

			// 隐私协议选择
			changeAgree(e) {
				console.log('选择', e)
				if (e.detail.value.length > 0) this.agree = true
				else this.agree = false
			},
			// 隐私协议 
			openAgreement() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=1'
				})
			},
			openUse() {
				uni.navigateTo({
					url: '/pages/webView/Use'
				})
			},
			// 发送验证码
			codeChange() {

				if (this.phone === "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return;
				}
				if (!regPhone.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: "none"
					});
					return;
				}
				// if(this.code === "") return this.$api.msg('请输入验证码')

				console.log('手机号', this.UserPhone, this.Phone)
				uni.showLoading({
					title: '发送中'
				})
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: "none"
					});
					return;
				}
				this.$http('post', '/BO/CustomerinfoMerchant/cCusRegister', {
					Phone: this.phone,
					Type: "APP"
				}).then(res => {
					if (res.Success) {
						uni.hideLoading()
						// this.op()
						uni.showToast({
							icon: 'none',
							title: '已发送'
						})
						this.codeTime = 60
						let timer = setInterval(() => {
							this.codeTime--;
							if (this.codeTime < 1) {
								clearInterval(timer);
								this.codeTime = 0
							}
						}, 1000)

						// this.back()
					} else {
						uni.showToast({
							title: res.Msg,
							icon: "none"
						});
					}
				})
			},
			// 获取手机号权限
			getPhone() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('获取手机号权限结果', res);
						this.phoneCode = res.code
						this.$http('post', '/Base_Manage/Base_User/GetWxData?JsCode=' + this.phoneCode +
							'&type=hzq').then(
							result => {
								if (result.Success) {
									let data = JSON.parse(JSON.parse(result.Data).data)
									console.log(data);
									this.openId = data.openid //openid 用户唯一标识  
									this.unionid = data.unionid //unionid 开放平台唯一标识
									this.session_key = data.session_key //session_key  会话密钥  
								}
							})
					}
				})
			},
			getPhoneNumberOne(e) {
				console.log('获取手机号', e, this.agree)
				if (this.phone === "") {
					uni.showToast({
						title: '请先填写手机号',
						icon: "none"
					})
					return
				}
				if (!regPhone.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: "none"
					});
					return;
				}
				if (this.agree == false) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: "none"
					})
					return
				}
				this.disabled = true
				this.$http('post', '/Base_Manage/Home/WxPhoneLogin', {
					"Phone": this.phone
				}).then(
					result => {
						if (result.Success) {
							console.log('获取结果', result.Data)
							if (result.Data.State == true) {
								this.isCode = false
								this.status = true
								// 说明已经有账户信息 不用发送验证码
								let obj = {
									avatarUrl: result.Data.userdata.UserAvatarURL,
									phone: result.Data.userdata.UserPhone
								}
								uni.setStorageSync('userInfo', obj)
								if (this.isUser == '1') {
									uni.redirectTo({
										url: '/pages/Page/Page'
									})
									return
								}
								uni.redirectTo({
									url: '/pages/index/index?q=' + this.query
								})
							} else {
								this.disabled = false
								this.status = false
								this.isCode = true
								this.getPhoneNumberTwo()
							}

						}
					})
				// 以下代码先不删除后续需要打开
				// if (e.detail.errMsg.indexOf('fail') != -1) return
				// let pc = new WXBizDataCrypt('wxa24101ce1f340e47', this.session_key);
				// let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				// uni.setStorageSync('userInfo', {
				// 	phone: data.phoneNumber
				// })
				// uni.redirectTo({
				// 	url: '/pages/index/index?q=' + this.query
				// })
			},
			getPhoneNumberTwo() {
				if (this.phone === "") {
					uni.showToast({
						title: '请先填写手机号',
						icon: "none"
					})
					return
				}
				if (!regPhone.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: "none"
					});
					return;
				}
				if (this.agree == false) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: "none"
					})
					return
				}
				if (this.code === "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					})
					return
				}
				this.disabled = true
				this.$http('post', '/Base_Manage/Base_User/SaveWeChatUser', {
					"UserPhone": this.phone,
					"SmsCode": this.code
				}).then(res => {
					if (res.Success) {
						console.log('获取输入code信息结果', res.Data)
						// 说明已经有账户信息 不用发送验证码
						let obj = {
							avatarUrl: res.Data.userdata.UserAvatarURL ? res.Data.userdata.UserAvatarURL : "",
							phone: res.Data.userdata.UserPhone
						}
						uni.setStorageSync('userInfo', obj)
						if (this.isUser == '1') {
							uni.redirectTo({
								url: '/pages/Page/Page'
							})
							return
						}
						uni.redirectTo({
							url: '/pages/index/index?q=' + this.query
						})
					} else {
						uni.showToast({
							title: res.Msg,
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.margin90 {
		margin-top: 90rpx;
	}

	.inputBorder {
		height: 40px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	/* 	::v-deep.uni-easyinput__content{
		border: 1px solid blue ;
	} */
	.auth {
		text-align: center;
		padding: 40rpx;
		padding-top: 80rpx
	}

	.image {
		width: 400rpx;
		height: 400rpx;
	}

	.apply {
		margin-top: 40rpx;
	}

	.description {
		margin: 40rpx 0;
		color: #999;
	}

	.flexBox {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
</style>